<template>
	<view class="uni-login-box" :style="!show ? 'z-index:-1;opacity:0;display:none' : 'z-index:9999999999;opacity:1;display:block'" @tap="refuse">
		<view class='uni-login-white' @tap.stop="">
			<view class="uni-login-title size32">微信授权</view>
			<image :src="imgUrl+'logo.png'" mode="widthFix" class='uni-login-logo'></image>
			<view class="uni-login-txt size28">赛小狸申请获取以下权限</view>
			<view class="uni-login-msg size28">
				<view class="uni-login-dian"></view>
				<text class="size28">{{get_mobile ? '获得你的手机号' : '获得你的公开信息（昵称、头像等）'}}</text>
			</view>
			<view class="uni-login-btn">
				<button class='uni-login-btn-refuse size32 btn' @tap="refuse">拒绝</button>
				<button class='uni-login-btn-agree size32 btn' v-if="!get_mobile" open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getUserInfo">允许</button>
				<button type="primary" v-else class='uni-login-btn-agree size32 btn'open-type="getPhoneNumber" @getphonenumber="wxGetPhone">允许</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {wxSmallLogin , getSmallMobile , binkSmallPhone} from '@/api/common.js';
	
	export default{
		data(){
			return {
				show : false,
				session_key : '',
				user_info : {},
				get_mobile : false
			}
		},
		methods:{
			refuse(){
				this.show = false;
				this.$emit('error')
			},
			/**
			 * 获取手机号
			 */
			wxGetPhone(e){
				if (e.detail) {
					var encryptedData = e.detail.encryptedData;
					var iv = e.detail.iv;
					if (encryptedData && iv) {
						uni.showLoading({
							title:'正在获取手机号'
						});
						getSmallMobile({
							iv:iv,
							encryptedData:encryptedData,
							session_key : this.session_key
						}).then((res) =>{
							if(res.code) {
								this.user_info.mobile = res.msg.purePhoneNumber;
								var data_temp = {
									mobile: this.user_info.mobile, //手机号
									nick_name: this.user_info.nickName, //昵称
									openid_wechat: this.user_info.openid_wechat, //openid
									sex: this.user_info.gender, //性别
									avatar: this.user_info.avatarUrl, //头像
									province: this.user_info.province, //省
									city: this.user_info.city, //市
									unionid: this.user_info.unionid //unionid
								};
								binkSmallPhone(data_temp).then((res) =>{
									uni.hideLoading();
									if(res.code) {
										this.toast('登录成功');
										uni.setStorageSync('token',res.msg);
										this.show = false;
										this.$emit('success');
									} else {
										this.toast(res.msg);
										this.$emit('error')
									}
								});
							}
						});
					} else {
						this.toast('获取手机号失败');
						this.$emit('error')
					}
				}
			},
			
			/**
			 * 获取用户信息
			 * @param {Object} res
			 */
			getUserInfo(res){
				if(!res.detail.iv){
					this.toast('您取消了授权，登录失败');
				} else {
					var iv = res.detail.iv;
					var encryptedData = res.detail.encryptedData;
					this.user_info = res.target.userInfo;
					uni.login({
						provider: 'weixin',
						success: (res) => {
							uni.showLoading({
								title:'正在登录'
							})
							wxSmallLogin({
								code : res.code,
								iv:iv,
								encryptedData:encryptedData
							}).then((res)=>{
								uni.hideLoading();
								if(res.code) {
									this.toast('登录成功');
									this.show = false;
									uni.setStorageSync('token',res.msg);
									this.$emit('success');
								} else {
									this.toast('再次点击获取手机号');
									this.user_info.openid_wechat = res.msg.openid;
									this.user_info.unionid = res.msg.unionid;
									this.session_key = res.msg.session_key;
									this.get_mobile = true;
								}
							});
						},
						fail: () => {
							this.toast('授权失败');
							this.$emit('error')
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.uni-login-btn{
		display: flex;
	}
	.uni-login-btn > .btn{
		flex: 1;
		text-align: center;
		border-radius: 0;
		background: #FFFFFF;
		
	}
	.uni-login-btn > .btn::after{
		border: none;
	}
	.uni-login-btn > .btn.uni-login-btn-refuse{
		border-top: 1upx solid #f1f1f1;
	}
	.uni-login-btn > .btn.uni-login-btn-agree{
		background:$them-page-color;
		color: #FFFFFF;
		border-top: 1upx solid $them-page-color;
	}
	.uni-login-dian{
		display: inline-block;
		width: 16upx;
		height: 16upx;
		border-radius: 50%;
		background: #CCCCCC;
		margin-right: 10upx;
	}
	.uni-login-msg{
		width: 80%;
		text-align: left;
		margin:40upx auto;
		font-size: 28upx;
		color: #a1a1a1;
	}
	.uni-login-txt{
		width: 80%;
		text-align: center;
		margin: auto;
		overflow: hidden;
		height: 80upx;
		line-height: 80upx;
		border-bottom: 1upx solid #f1f1f1;
	}
	.uni-login-logo{
		display: block;
		width:220upx;
		height: 160upx;
		margin:20upx auto;
	}
	.uni-login-title{
		text-align: center;
		height: 100upx;
		line-height: 100upx;
		border-bottom:1upx solid #f1f1f1;
	}
	.uni-login-box{
		position: fixed;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		transition: all 0.2s linear;
	}
	.uni-login-white{
		position: absolute;
		width: 80%;
		background: #FFFFFF;
		border-radius: 10upx;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		overflow: hidden;
		box-shadow: 6upx 6upx 20upx rgba(26,26,26,0.3);
	}
</style>
